<template>
  <div class="page-container">

    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>营销中心</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          <el-breadcrumb-item>标签分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar">
      <el-form :inline="true" :model="filters" ref="filters">
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              :label="$t('action.add')"
              type="primary"
              @click="handleAddFirst"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        row-key="tagCategoryInfo.categoryName"
        border
        :tree-props="{children: 'infoList', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="tagCategoryInfo.id" label="ID" ></el-table-column>
        <el-table-column prop="tagCategoryInfo.categoryName" label="分类名称" ></el-table-column>
        <el-table-column prop="tagCategoryInfo.sort" label="排序" ></el-table-column>
        <el-table-column prop="tagCategoryInfo.whetherShow" label="是否显示" >
          <template slot-scope="scope">
            <span v-if="scope.row.tagCategoryInfo.whetherShow">显示</span>
            <span v-else>不显示</span>
          </template>
        </el-table-column>
        <el-table-column prop="tagCategoryInfo.creatorName" label="创建人" ></el-table-column>
        <el-table-column prop="tagCategoryInfo.updateTime" label="发表时间" ></el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.tagCategoryInfo.categoryLevel != 3"
              @click="handleAdd(scope.$index, scope.row)"
              type="text"
              class="btnText"
            >添加</el-button>
            <el-button  @click="handleEdit(scope.$index, scope.row)" type="text" class="btnText">编辑</el-button>
            <el-button
              class="btnText"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              v-if="scope.row.infoList == null"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增编辑界面-->
      <el-dialog
        class="el-dialog-style"
        :title="addTitle"
        :visible.sync="editDialogVisible"
        :close-on-click-modal="false"
      >
        <el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm" :size="size">
          <el-row class="searchDialog-input">
             <el-form-item label="ID" prop="id" v-if="false">
            <el-input :disabled="true" v-model="dataForm.id" placeholder="id"></el-input>
          </el-form-item>
          <el-form-item label="父分类ID：" prop="CategoryPid" v-if="false">
            <el-input v-model="dataForm.CategoryPid" clearable placeholder="父分类ID"></el-input>
          </el-form-item>
          <el-form-item label="分类级别：" prop="categoryLevel" v-if="false">
            <el-input v-model="dataForm.categoryLevel" clearable placeholder="分类级别"></el-input>
          </el-form-item>
          <el-form-item label="分类名称：" prop="categoryName">
            <el-input
              v-model.trim="dataForm.categoryName"
              maxlength="30"
              minlength="3"
              clearable
              placeholder="分类名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input
              v-model="dataForm.sort"
              type="number"
              @input="watchNumber($event)"
              clearable
              placeholder="排序"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示：" prop="whetherShow">
            <el-radio-group v-model="dataForm.whetherShow" clearable>
              <el-radio
                v-for="item in whetherShow"
                :key="item.value"
                :value="item.value"
                :label="item.value"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button :size="size" @click="cancel" plain type="primary">{{$t('action.cancel')}}</el-button>
          <el-button :size="size" type="primary" @click="submitForm">{{$t('action.submit')}}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import KtButton from "@/views/Core/KtButton";

export default {
  components: {
    KtButton
  },
  data() {
    return {
      size: "small",
      filters: {
        token: null
      },
      tableData: [],
      dataForm: {
        id: null,
        CategoryPid: 0,
        categoryLevel: 1,
        categoryName: "",
        sort: "",
        whetherShow: ""
      },
      whetherShow: [
        { label: "否", value: false },
        { label: "是", value: true }
      ],
      dataFormRules: {
        sort: [
          { required: true, message: "请输入排序序号", trigger: "blur" }
        ],
        categoryName: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ],

        whetherShow: [
          { required: true, message: "请选择是否展示", trigger: "blur" }
        ]
      },
      addTitle: "",
      operateAction: 1, //1代表添加、2代表编辑
      editDialogVisible: false
    };
  },
  methods: {
    handleAddFirst() {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
      this.addTitle = "添加分类";
      this.operateAction = 1;
      this.dataForm.id = 0;
      this.dataForm.CategoryPid = 0;
      this.dataForm.categoryLevel = 1;
      this.dataForm.categoryName = "";
      this.dataForm.sort = "";
      this.dataForm.whetherShow = true;
      this.editDialogVisible = true;
    },
    handleAdd(index, row) {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
      this.addTitle = "添加分类";
      this.operateAction = 1;
      this.dataForm.id = 0;
      this.dataForm.CategoryPid = row.tagCategoryInfo.id; //父分类id其实是当前数据的id
      this.dataForm.categoryLevel = row.tagCategoryInfo.categoryLevel + 1;
      this.dataForm.categoryName = "";
      this.dataForm.sort = "";
      this.dataForm.whetherShow = true;
      this.editDialogVisible = true;
    },
    handleEdit(index, row) {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
      this.addTitle = "编辑分类";
      this.operateAction = 2;
      this.dataForm.id = row.tagCategoryInfo.id;
      this.dataForm.CategoryPid = row.tagCategoryInfo.CategoryPid;
      this.dataForm.categoryLevel = row.tagCategoryInfo.categoryLevel;
      this.dataForm.categoryName = row.tagCategoryInfo.categoryName;
      this.dataForm.sort = row.tagCategoryInfo.sort;
      this.dataForm.whetherShow = row.tagCategoryInfo.whetherShow;
      this.editDialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          let this_ = this;
          this_.dataForm.id = row.tagCategoryInfo.id;
          console.log(this_.dataForm.id);
          if (this_.operateAction == 1) {
            this.utils.request.delTag(this_.dataForm, function(res) {
              if (res.code == "0000") {
                this_.$message({ message: "删除成功", type: "success" });
                this_.queryPage();
              } else {
                this_.$message({
                  message: "已有页面关联此分类，无法删除",
                  type: "error"
                });
                this_.queryPage();
              }
            });
          }
        })
        .catch(() => {});
    },

    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let this_ = this;
          if (this_.dataForm.categoryName.length < 3) {
            this_.$message({
              message: "请输入三个以上三十个以下的字符",
              type: "error"
            });
          } else {
            //添加
            if (this_.operateAction == 1) {
              this.utils.request.addTagCategory(this_.dataForm, function(res) {
                if (res.code == "0000") {
                  this_.editDialogVisible = false;
                  this_.$message({ message: "添加成功", type: "success" });
                  this_.queryPage();
                } else {
                  this_.$message({
                    message: "此标签分类名称已被使用,请重新输入",
                    type: "error"
                  });
                }
              });
              //编辑
            } else {
              this.utils.request.editTagCategory(this_.dataForm, function(res) {
                if (res.code == "0000") {
                  this_.editDialogVisible = false;
                  this_.$message({ message: "编辑成功", type: "success" });
                  this_.queryPage();
                } else {
                  if (res.code == "7777") {
                    this_.$message({
                      message: "此标签分类已被使用,无法编辑",
                      type: "error"
                    });
                  }
                  if (res.code == "8888") {
                    this_.$message({
                      message: "此标签分类名称已被使用，请重新输入",
                      type: "error"
                    });
                  } else {
                    this_.$message({
                      message: "操作失败",
                      type: "error"
                    });
                  }
                }
              });
            }
          }
        }
      });
    },

    queryPage() {
      let this_ = this;
      this.utils.request.queryTagCategory(null, function(res) {
        if (res.code == "0000") {
          if (null != res.data) {
            if (null != res.data.rows) {
              this_.tableData = res.data.rows;
            }
          }
        }
      });
    },
    //监听排序不为负数
    watchNumber: function(val) {
      let this_ = this;
      if (val.toString().includes("-") || val.toString().includes("+")) {
        this_.$message({ message: "排序请输入正整数 ", type: "error" });
        this_.dataForm.sort = "";
      }
    },
    //取消按钮
    cancel() {
      this.editDialogVisible = false;
      this.queryPage();
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
    }
  },

  //初始化数据
  mounted() {
    console.log("初始化表格数据");
    this.queryPage();
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/css/public.scss';
/deep/ .el-radio {
  height: 32px;
  line-height: 32px;
  margin-right: 20px;
}
.search-button{
	 margin: 20px 0px 0px;
   padding-bottom: 20px;
    padding-bottom: 20px;
    .el-form-item{
    margin-bottom: 0px !important;
  }
}
</style>
